site / src / pages / blog / [...slug].astro

---
import { getCollection } from "astro:content";
import Base from "/components/Base.astro";
import { render } from "astro:content";

import Box4x3Mask from "/assets/box-4x3-mask.png";
import Hr from "/assets/hr.png";

import "/components/markdown.css";

export async function getStaticPaths() {
  return await Promise.all(
    await getCollection("blog").then((posts) =>
      posts.map(async (post) => ({
        params: { slug: post.id },
        props: {
          post,
          banner: await import(
            `../../content/blog/assets/${post.data.banner.replace(".png", "")}.png`
          ).then(({ default: img }) => img.src as string),
        },
      })),
    ),
  );
}

const { post, banner } = Astro.props;
const { Content } = await render(post);
---

<Base
  title={post.data.title}
  graph={{
    description: post.data.bio,
    url: Astro.url.toString(),
    type: "article",
    image: banner,
  }}
>
  <article>
    <header
      style={`
      --box-4x3-mask-png: url(${Box4x3Mask.src});
    `}
    >
      <img src={banner} alt="" />
      <div class="header">
        <h1>{post.data.title}</h1>
        <p>{post.data.bio}</p>
        <time
          datetime={`${post.data.pub.getFullYear()}-${post.data.pub.getMonth() + 1}-${post.data.pub.getDate()}`}
        >
          {post.data.pub.getDate()}-{post.data.pub.getMonth() + 1}-{
            post.data.pub.getFullYear()
          }
        </time>
      </div>
    </header>

    <hr style={`--hr-png: url(${Hr.src});`} />

    <div class="markdown-style">
      <Content />
    </div>
  </article>
</Base>

<style>
  header {
    max-width: 60ch;
    padding: 10px;
    margin: auto;

    position: relative;
  }

  .header {
    /* just use old layout on mobile
    it works there */
    @media not (max-width: 60ch) {
      position: absolute;
      inset: auto 50px 0;

      background-image: var(--box-4x3-mask-png);
      background-size: 100% 100%;
      padding: 20px;
    }
  }

  img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    mask-image: var(--box-4x3-mask-png);
    mask-size: 100%;
  }

  time {
    color: #000000b0;
  }

  hr {
    margin-block: 5px;
    height: 5px;
    border: none;
    border-image: var(--hr-png) 0 5 fill / 0 5px round;
    width: 100%;
    max-width: 70ch;
    margin-inline: auto;
  }
</style>